import React from "react";
import {Card, Flex} from "antd";
import './index.scss'

interface IPageHeaderProp {
  title?: string
  renderRight?: () => React.ReactNode
  children?: React.ReactNode
}

const PageHeader: React.FC<IPageHeaderProp> = ({title, renderRight, children}) => {

  return (
    <Card style={{width: "100%", padding: "10px"}}>
      <Flex vertical>
        <Flex align="center" justify="space-between" style={{marginBottom: '10px'}}>

          <Flex className="page-header-left">
            <h1 className="page-header-left-title">{title}</h1>
          </Flex>

          <div className="page-header-right">
            {renderRight ? renderRight() : <div/>}
          </div>
        </Flex>

        <div>
          {children}
        </div>
      </Flex>
    </Card>
  )
}

export default PageHeader